<template>
	<view class="content" style="height:100vh">
		<view class="ranking" :style="rankingList.length==0 ? 'position: relative;top: 14vw;':''">

			<view class="topBar">
				<view class="top-back">
					<image src="/back.png" mode="" @tap="$wanlshop.back(1);"></image>
				</view>
				<view class="top-centet">
					{{dataObj.name}}
				</view>
				<view class="top-right">
					成都
				</view>
			</view>

			<view class="ranking_three ranking_second">
				<view v-if="rankingList.length !=0">
					<!-- :style="`background-image:url(${rankingList[1].prove_imgs ?$wanlshop.oss(rankingList[1].prove_imgs):''})`" -->
					<view class="cu-avatar round margin-left" style="margin-left: 30%;"
						:style="backgroundImage:url({${rankingList[1].prove_imgs?$wanlshop.oss(rankingList[1].prove_imgs):''})">
					</view>
					<button class="cu-btn round sm follow_with_interest_btn" @tap="follow(rankingList[1],0)"
						v-if="rankingList[1].is_follow == 0" style="background:#FF4530;width: auto;">关注</button>
					<button class="cu-btn round sm follow_with_interest_btn guanzhu" v-else
						@tap="follow(rankingList[1],1)" style="margin-left: 18px;">已关注</button>
				</view>
				<view class="second public_ranking"></view>
			</view>

			<view class="ranking_three ranking_first">
				<view v-if="rankingList.length !=0">
					<!-- :style="`background-image:url(${rankingList[0].prove_imgs ?$wanlshop.oss(rankingList[0].prove_imgs):''})`" -->
					<view class="cu-avatar round margin-left" style="margin-left: 30%;">
					</view>

					<button class="cu-btn round sm follow_with_interest_btn" @tap="follow(rankingList[0],0)"
						v-if="rankingList[0].is_follow == 0" style="background:#FF4530;width: auto;">关注</button>
					<button class="cu-btn round sm follow_with_interest_btn guanzhu" v-else
						@tap="follow(rankingList[0],1)" style="margin-left: 18px;">已关注</button>
				</view>
				<view class="first public_ranking"></view>
			</view>

			<view class="ranking_three ranking_third">
				<view v-if="rankingList.length !=0">
					<!-- :style="`background-image:url(${rankingList[2].prove_imgs? $wanlshop.oss(rankingList[2].prove_imgs):''})`" -->
					<view class="cu-avatar round margin-left" style="margin-left: 30%;">
					</view>
					<button class="cu-btn round sm follow_with_interest_btn" @tap="follow(rankingList[2],0)"
						v-if="rankingList[2].is_follow == 0" style="background:#FF4530;width: auto;">关注</button>
					<button class="cu-btn round sm follow_with_interest_btn guanzhu" v-else
						@tap="follow(rankingList[2],1)" style="margin-left: 18px;">已关注</button>
				</view>
				<view class="third public_ranking"></view>
			</view>

		</view>
		<view class="list" v-if="rankingList.length != 0">
			<view class="item" v-for="(item,index) in rankingList" :key="index">
				<view class="item-index">{{index+1}}</view>
				<view>
					<image class="cu-avatar round margin-left" :src="item.prove_imgs?$wanlshop.oss(item.prove_imgs):''">
					</image>
				</view>
				<view class="info" @tap="$wanlshop.to(`/pages/user/integral/homePage?item=${JSON.stringify(item)}`  )">
					<view class="tis">
						<view>
							{{item.real_name}}
						</view>
						<view class="gong">
							{{item.work_name}}
						</view>
					</view>

					<view style="height: 20px;color: #666666;font-size: 12px;">好评率{{item.favorable_comment_rate}}%
					</view>
				</view>
				<view style="margin-right: 4%;">
					<button class="cu-btn round sm follow_with_interest_btn"
						style="margin-top: 16%;background:#FF4530; " @tap="follow(item,0)"
						v-if="item.is_follow == 0">关注</button>
					<button class="cu-btn round sm follow_with_interest_btn guanzhu" v-else
						@tap="follow(item,1)">已关注</button>
				</view>
			</view>
		</view>

		<view v-else class="noneImg">
			<view>
				<image src="https://img.aibbyp.com/wechat/newImg/noneImg.png" mode=""></image>
			</view>
			<view class="block-font">暂无{{dataObj.name}}排行</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				dataObj: '',
				rankingList: []
			};
		},
		onLoad(option) {
			this.dataObj = option
			console.log(option.name, '-=---')
			this.getRanKing()
		},
		computed: {
			
		},
		methods: {
			getRanKing() {
				this.$api.get({
					url: '/jmy/worker/list',
					data: {
						worker_type: this.dataObj.id
					},
					success: res => {
						console.log(res)
						this.rankingList = res.data
					}
				})
			},
			follow(item, i) {
				let url = i == 0 ? '/jmy/worker/follow' : '/jmy/worker/cancelFollow'
				this.$api.post({
					url: url,
					data: {
						user_id: item.user_id
					},
					success: res => {
						console.log('成功了')
						this.getRanKing()
					}
				})
			},
		}
	}
</script>

<style>
	>>>.uni-placeholder {
		display: none;
	}

	.topBar {
		display: flex;
		position: fixed;
		top: 0;
		width: 100%;
		left: 0;
		font-size: 17px;
		font-weight: 500;
		line-height: normal;
		letter-spacing: 0em;
		font-feature-settings: "kern" on;
		color: #FFF;
		height: 30px;
		justify-content: center;
		margin-top: 8px;
		align-items: center;
	}

	.top-back image {
		width: 25.8px;
		height: 21px;
	}

	.top-back {
		width: 33%;

	}

	.top-centet {
		width: 33%;
		text-align: center;
	}

	.top-right {
		width: 33%;
		text-align: right;
		padding-right: 10px;
	}

	.content {
		padding: 0px 4% 0 4%;
		background-image: url("https://img.aibbyp.com/wechat/images/artison/ranking/top.png");
		background-repeat: repeat;
		background-size: 100% 110%;
	}

	.ranking {
		display: flex;
		flex-direction: row;
		padding-top: 10%;
		height: 33%;
		padding-left: 10%;
		padding-right: 10%;
		height: 380rpx;
	}

	.ranking_avatar {
		width: 40px;
		height: 40px;
		border: 1px solid black;
		border-radius: 50%;
		margin-left: 50upx;
	}

	.block-font {
		margin-top: 20px;

		font-size: 18px;
		color: rgba(153, 153, 153, 1);
		font-weight: 500;
	}

	.follow_with_interest_btn {
		width: 50px;
		height: 21px;
		font-size: 12px;
		margin-left: 25%;
		background: #FF4530;
		color: #FFFFFF;
	}

	.ranking_three {
		width: 33.333%;
	}

	.ranking_second {
		padding-top: 15%;
	}

	.ranking_first {
		padding-top: 4%;
	}

	.ranking_third {
		padding-top: 22%;
	}

	.second {
		height: 82.7%;
		margin-top: -33%;
		background-image: url("https://img.aibbyp.com/wechat/images/artison/ranking/two.png");
	}

	.first {
		margin-top: 10%;
		background-image: url("https://img.aibbyp.com/wechat/images/artison/ranking/one.png");
		background-size: 100% 101%;
		margin-left: -1px;
		height: 86.5%;
		margin-top: -32.5%;
	}

	.third {

		height: 77.5%;
		margin-top: -31.5%;
		background-image: url("https://img.aibbyp.com/wechat/images/artison/ranking/tree.png");
		margin-left: -10upx;

	}

	.public_ranking {
		width: 100%;
		background-repeat: no-repeat, repeat;
		background-size: 100% 100%;
	}

	.noneImg {
		width: 100%;
		height: 75%;
		border: 2px solid #FFEBEB;
		border-radius: 10px 10px 0px 0px;
		background: #FFF;
		text-align: center;
	}

	.noneImg image {
		margin: 0 auto;
		margin-top: 10vh;
		width: 70vw;
		height: 30vh;
	}

	.list {
		width: 100%;
		height: 75%;
		border: 2px solid #FFEBEB;
		border-radius: 10px 10px 0px 0px;
		background: #FFF;
		display: flex;
		flex-direction: column;
		overflow: auto;
	}

	.item {
		display: flex;
		flex-direction: row;
		width: 100%;
		height: 37px;
		margin-top: 5%;
	}

	.item-index {
		left: 0px;
		top: 5px;
		width: 10px;
		opacity: 1;
		font-family: Source Han Sans;
		font-size: 15px;
		font-weight: 500;
		font-feature-settings: "kern" on;
		line-height: 35px;
		color: #FF5F5F;
		margin-left: 2%;
	}

	.tis {
		display: flex;
	}

	.guanzhu {
		border-radius: 33px;
		font-size: 10px;
		/* -webkit-font-feature-settings: "kern" on; */
		/* font-feature-settings: "kern" on; */
		color: #808080;
		z-index: 0;
		background: #F5F5F5;
		margin-left: 5px;
		width: 63px;
		height: 21px;
	}

	.gong {
		width: auto;
		height: 19px;
		padding: 0 5px;
		border-radius: 26px;
		opacity: 1;
		text-align: center;
		box-sizing: border-box;
		border: 1px solid #FFC2F9;
		margin-left: 10px;
		font-family: 思源黑体;
		font-size: 12px;
		color: #D800C2;
		z-index: 0;
	}

	.info {
		height: 40px;
		display: flex;
		flex-direction: column;
		margin-left: 3%;
		font-size: 13px;
		font-weight: normal;
		line-height: normal;
		letter-spacing: 0em;
		font-feature-settings: "kern" on;
		color: #333333;
		width: 56%;
	}
</style>